<template>
  <div id="config-edit">
    <el-form ref="form" size="small" :model="form" :rules="configRules" label-width="100px">
      <el-form-item label="配置项KEY" prop="configKey">
        <el-input
          v-model="form.configKey"
          maxlength="255"
          clearable
          :disabled="!form.isEdit && operateType === $const.OPERATE_TYPE_ADD"
        />
      </el-form-item>
      <el-form-item label="配置项名称" prop="configName">
        <el-input
          v-model="form.configName"
          maxlength="255"
          clearable
          :disabled="!form.isEdit && operateType === $const.OPERATE_TYPE_ADD"
        />
      </el-form-item>
      <el-form-item label="别名">
        <el-input v-model="form.alias" maxlength="1024" clearable />
      </el-form-item>
      <el-form-item label="配置项值" prop="configValue">
        <el-input v-model="form.configValue" maxlength="2048" clearable />
      </el-form-item>
      <el-form-item label="配置项描述" prop="configDesc">
        <el-input v-model="form.configDesc" maxlength="1024" clearable />
      </el-form-item>
      <el-form-item label="是否默认" prop="isDefault">
        <el-switch
          v-model="form.isDefault"
          active-text="是"
          inactive-text="否"
          :active-value="1"
          :inactive-value="0"
          @change="changeDef"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancelOp">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { constants as $const } from '@/store/constants'
import { updateSystemConfig } from '@/api/config'

export default {
  name: 'ConfigEdit',
  props: {
    configInfo: {
      type: Object,
      required: true
    },

    operateType: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      form: {
        id: '',
        isEdit: true,
        configKey: '',
        alias: '',
        configName: '',
        configValue: '',
        configDesc: '',
        isDefault: 1
      },
      configRules: {
        configKey: [{ required: true, message: '配置项名称不能为空', trigger: 'blur' }],
        configName: [{ required: true, message: '配置项名称不能为空', trigger: 'blur' }],
        configValue: [{ required: true, message: '配置值不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    $const() {
      return $const
    }
  },
  emit: ['cancel-edit', 'submit-edit'],
  watch: {
    configInfo: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.form = { ...newVal }
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false
        }
        const reqConfig = { ...this.form }
        reqConfig['operateType'] = this.operateType
        updateSystemConfig(reqConfig).then(res => {
          this.$message.success('操作成功')
          this.$emit('submit-edit')
        }).catch(err => {
          console.error(err)
          this.$message.error('！！操作失败！！')
        })
      })
    },

    cancelOp() {
      this.$refs.form.resetFields()
      this.$emit('cancel-edit')
    },

    changeDef(val) {
      if (val === 1) {
        this.$message.warning('请注意：默认值有且只有一个！')
      }
    }
  }
}
</script>

<style scoped>

</style>
